<template>
    <!-- 使用如 sm:, md:, lg:, xl: 的前缀来控制不同屏幕尺寸下的样式。
     常见的屏幕尺寸包括 sm（小屏幕）、md（中等屏幕）、lg（大屏幕）、xl（超大屏幕）。

    sm:：仅在屏幕宽度大于或等于 640px 时生效。   sm: 前缀表示在屏幕宽度至少为 640px（小屏幕）时
    md:：仅在屏幕宽度大于或等于 768px 时生效。
    lg:：仅在屏幕宽度大于或等于 1024px 时生效。
    xl:：仅在屏幕宽度大于或等于 1280px 时生效。
 -->
    <div class="bg-red-500 sm:bg-green-500 md:bg-blue-500 lg:bg-yellow-500">
        Responsive Example
    </div>


    <!-- hidden: 默认情况下隐藏元素。
        flex: 默认情况下显示元素，并设置为 flex 布局。
        sm:flex: 在小屏幕（sm）断点及以上时显示元素，并设置为 flex 布局。
        sm:hidden: 在小屏幕（sm）断点及以上时隐藏元素。 -->

        <!-- sm:w-10/12：在 sm（small）断点及以上，元素的宽度设置为父宽度的 10/12（即 10 个栅格单位）。
             sm:ml-1/12：在 sm 断点及以上，元素左边距设置为父宽度的 1/12（即偏移 1 个栅格单位）。 -->

    <!-- relative: 设置元素的定位为相对定位。
    isolate: 防止元素受到同级兄弟元素的影响。
    inline-flex: 使元素成为内联级弹性容器。
    items-center: 在弹性容器内垂直居中子元素。
    justify-center: 在弹性容器内水平居中子元素。
    border: 添加边框。
    text-base: 设置字体大小为基线大小。
    uppercase: 将文本转换为大写。
    font-mono: 使用等宽字体。
    tracking-widest: 设置字母间距为最大。
    shrink-0: 防止元素收缩。
    focus:outline-none: 移除聚焦时的轮廓线。
    data-[focus]:outline: 使用数据属性来添加聚焦时的轮廓线。
    bg-[--btn-bg]: 使用 CSS 变量设置背景颜色。
    text-[--btn-text]: 使用 CSS 变量设置文本颜色。
    border-[--btn-border]: 使用 CSS 变量设置边框颜色。
    hover:bg-[--btn-hover]: 设置鼠标悬停时的背景颜色。
    rounded-full: 设置元素的边角为圆形。 -->
</template>